<template>
  <div class="businessAnalysis">
    <el-button type="primary" @click="$router.back()">返回店铺列表</el-button>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="grid-content">
          <span>店铺编号：2514854</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <span>店铺名称：美宜佳-保利店</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <span>行业：零售</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <span>联系电话：188xxxxxxxx</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="grid-content">
          <span>店铺销售情况</span>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="2022-02-17"
            end-placeholder="2022-03-26">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span class="salemoney">销售额：xxxx.xx元</span>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content">
          <span class="blanketOrder">总订单量：xxxx.xx元</span>
        </div>
      </el-col>
      <el-col>
        <div id="salePie"></div>
      </el-col>
    </el-row>
    <el-row class="el-row3" :gutter="10">
      <el-col :span="24">
        <div class="grid-content">
          <span>店铺消费情况</span>
        </div>
      </el-col>
      <el-col>
        <div id="consume"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      value1: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {
    drawEchart () {
      const myChart = this.$echarts.init(document.getElementById('salePie'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '店铺销售情况',
            type: 'pie',
            radius: '100%',
            data: [
              { value: 37.5, name: '类别2：xx.xx元' },
              { value: 25, name: '类别1：xx.xx元' },
              { value: 37.5, name: '类别3：xx.xx元' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    drawChart () {
      const myEchart = this.$echarts.init(document.getElementById('consume'))
      myEchart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '店铺消费情况',
            type: 'pie',
            radius: '100%',
            data: [
              { value: 10, name: '素材费:xx.xx元' },
              { value: 35, name: '权益费:xx.xx元' },
              { value: 10, name: '模板费:xx.xx元' }
            ]
          }
        ]
      })
    }
  },
  mounted () {
    this.drawEchart()
    this.drawChart()
  }
}
</script>

<style scoped>
#consume {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
#salePie {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.businessAnalysis {
  margin: 0 20px;
}
.el-button {
  margin-top: 10px;
}
.businessAnalysis .el-row3 {
  border-bottom: none;
}
.el-row {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}
.el-col {
  margin-top: 10px;
}
</style>
